<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>菜单管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <style>
    body {
        margin: 10px;
    }

    .demo-carousel {
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
    </style>
</head>

<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>以下为用户列表</legend>
    </fieldset>
    <table class="layui-hide" id="UserList" lay-filter="UserTapped"></table>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>以下为菜单列表</legend>
    </fieldset>
    <table class="layui-hide" id="MenuList" lay-filter="MenuTapped"></table>
    <script type="text/html" id="actionBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="titleTpl">
        {{/*<a href="MenuDetail.html" class="layui-table-link">{{d.Name}}</a>*/}}
    </script>
    <script type="text/html" id="nameTpl">
      {{/*<a href="AddStore.html" class="layui-table-link">{{d.Name}}</a>*/}}
    </script>
    <script src="/static/layui/layui.js"></script>
    <script>
    layui.config({
        version: '1515376178738' //为了更新 js 缓存，可忽略
    });

    layui.use(['laypage', 'layer', 'table', 'upload', 'element'], function() {
        var laypage = layui.laypage //分页
        layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element; //元素操作
        var checkStatus = table.checkStatus('UserList'); //test即为基础参数id对应的值

        console.log(checkStatus.data) //获取选中行的数据
        console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
        console.log(checkStatus.isAll) //表格是否全选

        //执行一个 table 实例
        table.render({
            elem: '#MenuList',
            height: 332,
            url: 'http://10.12.25.66:8081/v1/apis/goods/query?shopId=1' //数据接口
                ,
            page: true //开启分页
                ,
            cols: [
                [ //表头
                    { field: 'Id', title: 'ID', width: 80, sort: true, fixed: 'left' },
                    { field: 'Name', title: '菜品名', width: 280, templet: '#titleTpl' },
                    { field: 'Price', title: '销售价', width: 80, sort: true, edit: true },
                    { field: 'OriginalPrice', title: '原价', width: 80, edit: true },
                    { field: 'ShopId', title: '店铺Id', width: 170 },
                    { field: 'Stock', title: '库存', width: 80, sort: true, edit: true },
                    { fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#actionBar' }
                ]
            ],
            done: function(res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });

        //监听工具条
        table.on('tool(MenuTapped)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,
                layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
                ,
            count: 100 //总页数
                ,
            skin: '#1E9FFF' //自定义选中色值
                //,skip: true //开启跳页
                ,
            jump: function(obj, first) {
                if (!first) {
                    layer.msg('第' + obj.curr + '页');
                }
            }
        });

        table.render({
            elem: '#UserList',
            height: 332,
            url: 'http://10.12.25.66:8081/v1/apis/user/roleList',
            page: true,
            even: true,
            checkbox: true,
            cols: [
                [
                    { field: 'Id', title: '用户Id', width: '80', sort: true, fixed: 'left', type: 'checkbox' },
                    { field: 'Title', title: '用户名', width: '200', templet: '#titleTpl' },
                    { field: 'Name', title: '用户角色', width: '100', templet: '#nameTpl'},
                    { field: 'Remark', title: '备注', width: '300', edit: true },
                    { field: 'Status', title: '状态', width: '80' },
                    { fixed: 'right', title: '操作', width: 165, align: 'center', toolbar: '#actionBar' }
                ]
            ],
            done: function(res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });

        table.on('checkbox(UserTapped)', function(obj) {
            console.log(obj)
        });

        table.on('edit(UserTapped)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据  
        });

    });
    </script>
</body>

</html>